<template>
  <el-tag :type="dictTagType"
          disable-transitions>
    {{ compLabel }}
  </el-tag>
</template>

<script lang="ts" setup>
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

defineOptions({
  name: "DictLabelTag"
});
const props = defineProps({
  value: {type: Object, required: true},
  dictType: {type: String, required: true},
  tagType: {type: Object, required: false, default: undefined},
  tagDefaultType:{type: String, required: false},
});

const compLabel = ref("");
const dictTagType = ref<any>("success");

onMounted(() => {
  getCompLabel();
})
// @ts-ignore
let {proxy} = getCurrentInstance()
watch(() => props.value, () => {
  getCompLabel();
})
const getCompLabel = () => {
  proxy.$http.post("/user-center/dict/findLabel", {
    value: props.value,
    dictType: props.dictType
  }).then((res: any) => {
    compLabel.value = res.data.label;
    if(props.tagType){
      selectTag(props.value,props.tagType);
    }else{
      dictTagType.value=props.tagDefaultType
    }
  });
}

let selectTag = (value: any, tagList: any) => {
  let tagType = '';
  for (let i = 0; i < tagList.length; i++) {
    let tag = tagList[i];
    console.log(value,"_",tag.eq,":",tag.type);
    if (tag.eq && value == tag.eq) {
      tagType = tag.type;
    } else if (tag.gt && value > tag.gt) {
      if (tag.lt && value < tag.lt) {
        tagType = tag.type;
      } else if (tag.lte && value <= tag.lte) {
        tagType = tag.type;
      } else {
        tagType = tag.type;
      }
    } else if (tag.gte && value >= tag.gte) {
      if (tag.lt && value < tag.lt) {
        tagType = tag.type;
      } else if (tag.lte && value <= tag.lte) {
        tagType = tag.type;
      } else {
        tagType = tag.type;
      }
    }
  }
  dictTagType.value=tagType;
  return tagType;
}
</script>

<style scoped>

</style>